<template>
  <div>
    <section>
      <div class="section-swiper">
        <el-carousel
          :interval="5000"
          arrow="trigger"
          height="650px"
          @change="carouselChange"
        >
          <el-carousel-item>
            <img
              class="carousel-Img"
              src="../../assets/index/img1.jpg"
              alt=""
              srcset=""
            />
          </el-carousel-item>
          <el-carousel-item>
            <img
              class="carousel-Img"
              src="../../assets/index/img3.jpg"
              alt=""
              srcset=""
            />
          </el-carousel-item>
          <el-carousel-item>
            <img
              class="carousel-Img"
              src="../../assets/index/img4.jpg"
              alt=""
              srcset=""
            />
          </el-carousel-item>
        </el-carousel>
      </div>
    </section>
    <section>
      <div class="container mt-4">
        <div
          v-for="(item, index) in state.tableData"
          :key="index"
          class="item-list row mb-4"
        >
          <div class="lable-name">
            <div>
              {{ item.name }}
            </div>
            <div class="more" @click="goToClassify(item.id)">更多</div>
          </div>
          <div class="items-list col-md-12 row" v-if="item.cakeList.length">
            <div
              v-for="(items, index) in item.cakeList"
              :key="index"
              class="col-md-3 item-box"
              @click="goToDetails(items.id)"
            >
              <div class="item-border">
                <img :src="items.img" style="width: 200px; height: 200px" />
                <div class="item-info">
                  <div class="name">{{ items.name }}</div>
                  <div class="price">￥{{ items.price }}</div>
                </div>
              </div>
            </div>
          </div>
          <div class="items-list col-md-12 row" v-if="!item.cakeList.length">
            <el-empty description="暂时商品" />
          </div>
        </div>
      </div>
    </section>
  </div>
</template>
<script setup>
import { reactive, ref, onBeforeMount, defineProps, defineEmits } from "vue";

import request from "../../api/request";
import router from "../../router";

// defineProps({
//   color:{
//     type: String,
//     default: "11"
//   }
// })
const emit = defineEmits();
onBeforeMount(() => {
  initData();
});
const state = reactive({
  tableData: [],
});
const initData = () => {
  request.get("/classify/getList").then((res) => {
    if (res.code == 200) {
      res.data.forEach((item) => {
        if (item.cakeList.length >= 4) {
          // 提取前4个
          item.cakeList.splice(4, item.cakeList.length - 4);
        }
      });
      state.tableData = res.data;
    }
  });
};
const goToClassify = (id) => {
  router.push("/classifyList?params=" + id);
};
const goToDetails = (id) => {
  router.push("/cakeDetail?params=" + id);
};
const carouselChange = (index) => {
  console.log("index=====", index);
  if (index == 0) {
    emit("ziColor", "black");
  } else if (index == 1) {
    emit("ziColor", "white");
  } else if (index == 2) {
    emit("ziColor", "orange");
  }
};
</script>
<style scoped lang="scss">
.item-list {
  // border: 1px solid red;
  .lable-name {
    font-size: 22px;
    color: #3c2314;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .more {
      font-size: 14px;
      &:hover {
        cursor: pointer;
      }
    }
  }
  .row {
    padding: 0;
    margin: 0;
  }
  .items-list {
    // border: 1px solid green;
    .item-box {
      &:hover {
        cursor: pointer;
      }
      // border: 1px solid blue;
      padding: 20px;
      .item-border {
        // border: 1px solid red;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .item-info {
          width: 250px;
          height: 50px;
          border: 1px solid #e7e7e7;
          margin-top: 20px;
          background-color: rgba(255, 255, 255, 0.7);
          text-align: center;
          .name {
            color: #3c2314;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
          .price {
            color: #aa8764;
          }
        }
      }
    }
  }
}
</style>
